<template>
  <div class="HouseDetail_root">
    <!-- 标题 -->
    <my-title :title="houseInfo.community"/>
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in houseInfo.houseImg" :key="index">
        <img v-lazy="'http://liufusong.top:8080'+image" />
      </van-swipe-item>
    </van-swipe>
    <!-- 房屋具体信息 -->
    <div class="HouseDetail_info">
      <h3 class="HouseDetail_infoTitle">{{houseInfo.title}}</h3>
      <!-- 标签 -->
      <div class="HouseDetail_tags">
          <span
            class="tag"
            v-for="item in houseInfo.tags"
            :key="item"
          >{{item}}</span>
      </div>
      <!-- 价格面积房型 -->
      <div class="HouseDetail_infoPrice">
        <div class="HouseDetail_infoPriceItem">
          <div class="value">{{houseInfo.price}}<span>/月</span></div>
          <div class="key">租金</div>
        </div>
        <div class="HouseDetail_infoPriceItem">
          <div class="value">{{houseInfo.roomType}}</div>
          <div class="key">户型</div>
        </div>
        <div class="HouseDetail_infoPriceItem">
          <div class="value">{{houseInfo.size}}平米</div>
          <div class="key">面积</div>
        </div>
      </div>
      <!-- 具体信息 -->
      <div class="HouseDetail_infoBasic">
        <div class="HouseDetail_infoBasic_item">
          <div><span>装修：</span>精装</div>
          <div><span>楼层：</span>{{houseInfo.floor}}</div>
        </div>
        <div class="HouseDetail_infoBasic_item">
          <div><span>朝向：</span>{{houseInfo.oriented?houseInfo.oriented[0]:'东'}}</div>
          <div><span>类型：</span>普通住宅</div>
        </div>
      </div>
    </div>
    <!-- 地图 -->
    <div class="HouseDetail_map">
      <div class="HouseDetail_mapTitle">小区：<span>天山星城</span></div>
      <div class="HouseDetail_mapContainer"></div>
    </div>
    <!-- 房屋配套 -->
    <div class="HouseDetail_about">
      <div class="HouseDetail_houseTitle">房屋配套</div>
      <van-grid :column-num="5" :border="false">
        <van-grid-item v-for="(item,index) in houseInfo.supporting" :key="item" :icon="iconList[index]" :text="item" />
      </van-grid>
    </div>
    <!-- 房屋概况 -->
    <div class="HouseDetail_about">
      <div class="HouseDetail_houseTitle">房屋概况</div>
      <div class="seat"></div>
    </div>
    <!-- 猜你喜欢 -->
    <div class="HouseDetail_about">
      <div class="HouseDetail_houseTitle">猜你喜欢</div>
      <div class="seat"></div>
    </div>
    <!-- 底部按钮 -->
    <div class="btnAll">
      <div class="btn" @click="onFavorite">
        <img :src="isFavorite?'http://liufusong.top:8080/img/star.png':'http://liufusong.top:8080/img/unstar.png'" alt="">
        <span>收藏</span>
      </div>
      <div class="btn">在线咨询</div>
      <div class="btn">
        <a href="tel:400-618-4000" class="HouseDetail_telephone">电话预约</a>
      </div>
    </div>
  </div>
</template>

<script>
import MyTitle from '@/components/MyTitle'
import { getHouseInfo, getFavorites, addFavorite, deleteFavorite } from '@/api/houses.js'
export default {
  name: 'Detail',
  data () {
    return {
      houseInfo: {},
      iconList: ['smile-o', 'good-job-o', 'fire-o', 'sign', 'gift-card-o', 'tv-o', 'idcard', 'logistics', 'bar-chart-o', 'hotel-o'],
      isFavorite: false
    }
  },
  components: {
    MyTitle
  },
  props: {
    id: {
      type: String,
      required: true
    }
  },
  created () {
    this.loadHouseInfo()
  },

  methods: {
    // 取消或添加收藏
    async onFavorite () {
      this.$toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true
      })
      // 如果已经收藏则删除，反之则添加
      try {
        if (this.isFavorite) {
          await deleteFavorite(this.id)
          this.$toast.success('删除收藏成功！')
          this.isFavorite = false
        } else {
          await addFavorite(this.id)
          this.$toast.success('添加收藏成功！')
          this.isFavorite = true
        }
      } catch (err) {
        this.$toast.fail('更新失败，未知错误！')
      }
    },
    // 加载房屋具体信息以及查看房屋是否收藏
    async loadHouseInfo () {
      this.$toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true
      })
      try {
        const res = await getHouseInfo(this.id)
        // console.log(res)
        // 保存数据
        this.houseInfo = res.data.body
        const res2 = await getFavorites(this.id)
        // console.log(res2)
        this.isFavorite = res2.data.body.isFavorite
        this.$toast.clear()
      } catch (err) {
        this.$toast.fail('获取房屋具体信息失败！')
      }
    }
  }
}
</script>

<style scoped lang='less'>
.HouseDetail_root{
  position: relative;
  padding-bottom: 50px;
  background-color: #f6f5f6;
  font-family: "Microsoft YaHei";
  // 轮播图样式
  .van-swipe{
    height: 252px;
    img{
      height: 100%;
      width: 100%;
    }
  }
  // 房屋具体信息样式
  .HouseDetail_info{
    padding: 15px;
    background: #fff;
    // 标题样式
    .HouseDetail_infoTitle{
      font-weight: 400;
      font-size: 16px;
      color: #333;
    }
    // 标签样式
    .HouseDetail_tags{
      font-size: 14px;
      .tag{
        &:nth-child(odd){
          color: #39becd;
          background: #e1f5f8;
        }
        &:nth-child(even){
          color: #3fc28c;
          background: #e1f5ed;
        }
      }
      span{
        display: inline-block;
        font-size: 12px;
        border-radius: 3px;
        padding: 4px 5px;
        margin-right: 5px;
        line-height: 12px;
      }
    }
    // 价格面积房型
    .HouseDetail_infoPrice{
      border-top: 1px solid #cecece;
      border-bottom: 1px solid #cecece;
      margin: 15px 0;
      padding: 15px 0;
      display: flex;
      align-items: center;
      .HouseDetail_infoPriceItem{
        flex: 1;
        font-size: 14px;
        min-width: 10px;
        text-align: center;
        color: #999;
        .value{
          height: 26px;
          line-height: 26px;
          color: #fa5741;
          font-size: 18px;
          font-weight: bolder;
          span{
            font-size: 12px;
            font-weight: 400;
          }
        }
        .key{
          height: 26px;
          line-height: 26px;
        }
      }
    }
    // 具体信息
    .HouseDetail_infoBasic{
      font-size: 13px;
      display: flex;
      .HouseDetail_infoBasic_item{
        flex: 1;
        color: #333;
        span{
          display: inline-block;
          color: #999;
          padding-right: 5px;
          line-height: 26px;
        }
      }
    }
  }
  // 地图样式
  .HouseDetail_map{
    margin-top: 10px;
    background: #fff;
    font-size: 14px;
    .HouseDetail_mapTitle{
      margin: 0 3%;
      line-height: 44px;
      color: #666;
    }
    .HouseDetail_mapContainer{
      height: 145px;
    }
  }
  // 房屋配置,房屋概况样式
  .HouseDetail_about{
    margin-bottom: 10px;
    padding: 0 10px;
    background: #fff;
    .HouseDetail_houseTitle{
      font-weight: 600;
      font-size: 15px;
      margin-bottom: 10px;
      padding: 15px 0;
      border-bottom: 1px solid #cecece;
    }
    // 占位
    .seat{
      height: 204px;
    }
  }
  // 底部按钮
  .btnAll{
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    line-height: 50px;
    border-top: 1px solid #cecece;
    text-align: center;
    font-size: 17px;
    color: #999;
    background-color: #fff;
    .btn{
      flex: 1;
      height: 50px;
      margin-left: 8px;
      &:first-child{
        border-right: 1px solid #e8e8e9;
        margin-left: 0;
      }
      &:last-child{
        border-right: 1px solid #e8e8e9;
        background-color: #21b97a;
      }
      .HouseDetail_telephone{
        color: #fff;
        background: transparent;
        text-decoration: none;
      }
      img{
        width: 16px;
      }
      span{
        margin-left: 6px;

      }
    }
  }
}

</style>
